<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<meta name="author" content="金西振" />
		<title></title>
		<style></style>
	</head>
	<body>
		<div id="box" class="box" index="10" HelloWorld="12313">div</div>
		<input type="text" id="input" name="username" placeholder="账号" value="张三" />
    <input type="checkbox" id="checkbox" checked name="" id="">

		<script>
			var box = document.getElementById('box');
			var input = document.getElementById('input');
			var checkbox = document.getElementById('checkbox');
			// 在标签上添加的标准属性会作为元素对象的属性，比如：id、title

			// 如果是在标签上添加的自定义属性，不会作为元素对象的属性，比如：index
			// 但是，如果自定义属性是在JS中通过打点或者[]运算符添加的属性，此时把元素对象作为一个普通的对象看待，这样添加的属性是元素对象属性，比如：box.data
			box.data = 100;
			console.log(box.title);
			console.log(box.data); // data
			console.log(box.index); // undefined
			console.dir(box);

      box.setAttribute('style', 'color: red; font-size: 30px;');
      box.style.backgroundColor = '#00f';

      // 布尔类型的属性：使用setAttribute设置值，无论值什么，最终都会让属性值变为true
      // 建议：不要使用setAttribute设置布尔类型的属性，用打点调用法，直接这是false
      // checkbox.setAttribute('checked', 'false');
      // checkbox.setAttribute('checked', false);
      // checkbox.setAttribute('checked', 0);
      // checkbox.setAttribute('checked', null);
      checkbox.checked = false;
      // checkbox.removeAttribute('checked');

			// attribute属性的操作适用于所有属性
			// getAttribute 获取属性的值
			console.log(box.getAttribute('id'));
			console.log(box.getAttribute('class'));
			console.log(box.getAttribute('index'));
			console.log(input.getAttribute('value'));
			// setAttribute 设置属性的值，也可以添加属性
			input.setAttribute('value', '王五');
			box.setAttribute('i-q', '123');
			box.setAttribute('index', '123');
			box.setAttribute('title', '123');

			// removeAttribute 移除标签的属性
			box.removeAttribute('class');
			box.removeAttribute('index');

			// hasAttribute 判断是否具有某个属性
			console.log(box.hasAttribute('index'));
			console.log(box.hasAttribute('id'));
			// hasAttributes 判断标签是否具有属性
			console.log(box.hasAttributes());

			console.log(box.getAttributeNames());

      console.log(box.attributes);
		</script>
	</body>
</html>
